import { useState, useEffect, useRef } from 'react';
import Style from './index.module.less';

const FieldWrapper = (props) => {
  const [focus, setFocus] = useState(false);
  const [isOver, setIsOver] = useState(false);

  const box = useRef(null);

  const { labelHigh } = props;

  useEffect(()=>{
    if(isOver){
      const input = box.current.getElementsByClassName('ant-input')?.[0];
      if(input?.value){
        box.current.getElementsByClassName('ant-input-clear-icon')[0]?.classList.remove("ant-input-clear-icon-hidden");
      }
    }else{
      box.current.getElementsByClassName('ant-input-clear-icon')[0]?.classList.add("ant-input-clear-icon-hidden");
    }
  }, [isOver])

  useEffect(()=>{
    setIsOver(false);
    setFocus(false);
  }, [props.updateKey])

  return (
    <div
      className={`${Style['filter-field-wrapper']} ${focus ? Style['field-focus'] : ''}`}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      onMouseEnter={()=>setIsOver(true)}
      onMouseLeave={()=>setIsOver(false)}
      style={{ ...props.style }}
    >
      {props.label && <div className={focus || labelHigh ? Style['filter-field-label2']: Style['filter-field-label1']}>{props.label}</div>}
      <div className={Style['filter-field-content']} style={props.childrenStyle} ref={box}>
        {props.children}
      </div>
      {props.suffix && <div className={Style['filter-field-suffix']}>{props.suffix}</div>}
    </div>
  );
};

export default FieldWrapper;
